Javascript
Type
.js
in the first line of an input cell
Try to evaluate
.js
return 1+1
or
.js
const dom = document.createElement('span');
dom.innerText = "Hello World";
dom.style.color = 'lightblue';
return dom;
Github repo Javascript code is evaluated as a module, i.e. all defined variables are isolated to the cell.
To define global variables, use window
or core
object.
window.variable = 1
Output cell
The returned value from the function can be a Javascript object or DOM element. The last one will be displayed in the output cell
.js
const canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 500;
canvas.height = 500;
const ballRadius = 10;
let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 2;
let dy = -2;
function drawBall() {
ctx.beginPath();
ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
let uid;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawBall();
if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
dx = -dx;
}
if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
dy = -dy;
}
x += dx;
y += dy;
uid = requestAnimationFrame(draw);
}
uid = requestAnimationFrame(draw);
this.ondestroy = () => {
cancelAnimationFrame(uid);
}
return canvas;
Context
There is a few quite useful built-in objects accessible from the cell.
this.ondestroy
This object is called when a cell has been destroyed. Assign any clean-up function to the given object
this.ondestroy = () => {
//clean up the stuff
}
Always clean up any timers using this.ondestroy
variable. Otherwise those timers and animation loops will continue to work even after reevaluating the cell.
requestAnimationFrame
It is well-common method used in Javascript to synchronize with a framerate of the browser and render some graphics
Do not forget to cancelAnimationFrame
using this.ondestroy
method
Communication with Wolfram Kernel
In general one can define any function for WLJS Interpreter using Javascript cells, please see guide here FrontSubmit and Integration with server / client via WebSockets
Also see Communication
For the most applications event-based system is used, see Dynamics